/**
 * echarts图表库
 */

import * as echarts from 'echarts'
import { install } from 'element-plus'
import china from '@/assets/json/china.json'

export default {
    /* echarts挂载到全局*/
    install: (app) => {
        /* 折线图 */
        app.config.globalProperties.$line = (element, data) => {
            // 加载折线图数据
            var myChart = echarts.init(document.getElementById(element))

            const option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['隧道增加数量', '地质预测数量']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: data
            };

            myChart.setOption(option)
        },
            /* 绘制中国地图 */
            app.config.globalProperties.$china = (element) => {
                var myChart = echarts.init(document.getElementById(element))
                // 注册地图
                echarts.registerMap('china', china)

                const option = {
                    tooltip: {
                        triggerOn: 'click',
                        enable: true,
                    },
                    visualMap: {
                        min: 0,
                        max: 200,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'],
                        inRange: {
                            color: ['#e0f7fa', '#80deea', '#26c6da', '#0097a7']
                        },
                        show: true
                    },
                    series: [
                        {
                            type: 'map',
                            map: 'china',
                            roam: true,
                            itemStyle: {
                                normal: {
                                    borderColor: '#fff',
                                    borderWidth: 1,
                                    areaColor: '#b3e5fc'
                                },
                                emphasis: {
                                    areaColor: '#ffcc80',
                                    shadowColor: '#333',
                                    shadowBlur: 10
                                }
                            },
                            label: {
                                show: true,
                                color: '#333',
                                fontSize: 12
                            },
                            data: [
                                { name: '北京', value: 100 },
                                { name: '天津', value: 100 },
                                { name: '上海', value: 100 },
                                { name: '重庆', value: 100 },
                                { name: '河北', value: 100 },
                                { name: '河南', value: 100 },
                                { name: '云南', value: 50 },
                            ]
                        }
                    ]
                }
                myChart.setOption(option)
            }
    }
}